<template>
  <div class="sidenav-container">
    <div v-for="item in menu" :key="item.title"
         :class="{'section-chosen': item.page.includes($route.name)}"
         @click="gotoPage(item.to)">
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideNav",
  props: ['menu'],
  /*
  * menu:
  * [{
  *   title：菜单标题
  *   to：跳转页面
  *   page：突出显示时的页面
  * }]
  * */
  methods: {
    gotoPage(to) {
      this.$router.push(to);
    },
  }
}
</script>

<style scoped lang="scss">
.sidenav-container {
  min-width: 200px;
  text-align: center;
  line-height: 3;

  > div {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin: 10px 0;
    cursor: pointer;
    transition: .3s;
    &:hover, &.section-chosen{
      transition: .3s;
      border-left: 4px solid #357FF8;
      color: #357FF8;
    }
  }

}
</style>
